<template>
      <div>
        <div id="container"></div>
    </div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
  data () {
    return {
        longitude: 30.633005,//经度
        latitude: 103.698304,//纬度
        city:'',
    }
  },
  created() {
  },
  methods: {
    initMap() {
        //定义地图中心点坐标
        let _this = this
        var center = new TMap.LatLng(_this.longitude,_this.latitude)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 13,   //设置地图缩放级别
        });

        // 点标记
        var markerLayer = new TMap.MultiMarker({
          map: map,  //指定地图容器
          geometries: [{
              "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              "styleId": 'marker',  //指定样式id
              "position": center,  //点标记坐标位置
              "properties": {//自定义属性
                  "title": "marker1"
              }
          }]
        })

        // 文字标记
        var label = new TMap.MultiLabel({
            id: 'label-layer',
            map: map, //设置折线图层显示到哪个地图实例中
            //文字标记样式
            styles: {
                'label': new TMap.LabelStyle({
                    'color': '#3777FF', //颜色属性
                    'size': 12, //文字大小属性
                    'offset': { x: 2, y: -5 }, //文字偏移属性单位为像素
                    'angle': 0, //文字旋转属性
                    'alignment': 'left', //文字水平对齐属性
                    'verticalAlignment': 'middle' //文字垂直对齐属性
                })
            },
            //文字标记数据
            geometries: [{
                'id': 'label_1', //点图形数据的标志信息
                'styleId': 'label', //样式id
                'position': center, //标注点位置
                'content': '力丸科技有限公司', //标注文本
            }]
        });
      }
      
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style scoped>
#container {
  width: 7.5rem;
  height: 7.5rem;
}
</style>
